<template>
	<alert :show="show">
		<view class="alert-wrapper">
			<view class="alert-content">
				<view class="alert__title">恭喜中签</view>
				<view class="alert__tips">{{ info.time_text }}</view>
				<view class="assets">
					<view class="assets__img-wrapper">
						<image class="assets__img" :src="info.goods_image" mode=""></image>
					</view>
					<view class="assets__name">{{ info.goods_name }}</view>
				</view>

				<view class="btn-confirm" @tap.stop.prevent="onPurchase">前往购买</view>
			</view>
			<view class="btn-close" @tap.stop.prevent="onConfirm">
				<text class="dy-iconfont icon--cha"></text>
			</view>
		</view>
	</alert>
</template>

<script>
	import alert from '../index.vue';

	export default {
		components: {
			alert
		},
		props: {
			show: Boolean,
			info: {
				type: Object,
				default: {
					goods_id: 0,
					goods_image: '',
					goods_name: '',
					related_goods_id: 0,
					time_text: '',
				}
			}
		},
		data() {
			return {}
		},
		methods: {
			onConfirm: function(e) {
				this.$emit('dismiss');
			},
			onPurchase: function(e) {
				this.$emit('purchase', this.info.related_goods_id);
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/utils/iconfont-dy.css";

	.alert-content {
		background: #FFFFFF;
		border-radius: 25rpx;
		padding: 60rpx 40rpx;
		text-align: center;
	}

	.alert__title {
		font-size: 30rpx;
		font-weight: bold;
		color: $uni-text-color;
	}

	.alert__tips {
		margin-top: 30rpx;
		font-size: 22rpx;
		color: $uni-text-color-grey;
		line-height: 36rpx;
	}

	.btn-confirm {
		height: 76rpx;
		background: $uni-bg-color;
		border-radius: 38rpx;
		margin-top: 60rpx;
		color: #FFFFFF;
		font-size: 26rpx;
		text-align: center;
		line-height: 76rpx;
	}

	.assets {
		margin-top: 40rpx;
		text-align: center;
	}

	.assets__img-wrapper {
		display: inline-block;
		background-color: #f9f9f9;
		padding: 30rpx;
		border-radius: 14rpx;
		font-size: 0;
	}

	.assets__img {
		width: 160rpx;
		height: 160rpx;
		border-radius: 14rpx;
	}

	.assets__name {
		display: -webkit-box;
		word-break: break-all;
		text-overflow: ellipsis;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		margin-top: 20rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: $uni-text-color;
	}

	.btn-close {
		width: 100rpx;
		height: 100rpx;
		margin: 20rpx auto;
		text-align: center;
		line-height: 100rpx;
	}

	.btn-close .dy-iconfont {
		color: $uni-text-color-inverse;
		font-size: 56rpx;
	}
</style>
